<template>
  <div class="equipment-record-detail content bg-white full-height page-content">
    <div class="scrollbar scroll margin-b-20 margin-t-20 padding-l-20 padding-r-20">
      <div class="font-size-16 text-primary margin-b-20">设备详情</div>
      <div class="flex justify-between">
        <div style="width: calc(100% - 240px);line-height: 2.5" class="row font-14">
          <div class="padding-l-20 padding-r-20">
            <detail-dialog :headList="headList" :detailData="data" class="font-size-14"/>
          </div>
          <div class="col-12 padding-r-20 padding-l-20 text-ellipsis" style="margin-top: -10px">
            <div class="flex">
              <div>设备档案：</div>
              <div class="sudoku_row flex-1 flex items-center">
                <div class="sudoku_item " v-for="(document,index) in data.documents" :key="index">
                  <div @click="showFile(judgeFileExtension(document.name).type, document)" v-ripple class="file_item relative-position text-ellipsis">
                    {{ document.name }}
                    <q-tooltip>{{ document.name }}</q-tooltip>
                  </div>
                </div>
                <div v-if="data.documents && !data.documents.length">--</div>
              </div>
            </div>
          </div>
        </div>
        <div class="img-box">
          <div :style="{'background-image': `url('${data.photoUrls}')`}" class="flex justify-center items-center">
            <div class="text-center" v-if="!data.photoUrls">
              <q-icon name="iconfont icontubiao2-79" class="text-grey-4" style="font-size: 50px" />
              <div class="margin-t-10 text-grey-6">暂无图片</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <q-tabs
          v-model="tab"
          shrink stretch dense
          inline-label
          align="left"
          active-color="primary"
          indicator-color="primary"
          style="padding: 0 20px;
           position: relative"
        >
          <q-tab name="processOrder" label="加工工单" icon="iconfont iconjiagonggongdan"/>
          <q-tab name="qualityOrder" label="质检工单" icon="iconfont iconzhijiangongdan"/>
          <q-tab name="repairOrder" label="维修工单" icon="iconfont iconweixiugongdan"/>
          <q-tab name="maintainPlan" label="保养计划" icon="iconfont iconbaoyangjihua"/>
          <q-tab name="maintainOrder" label="保养工单" icon="iconfont iconbaoyanggongdan"/>
        </q-tabs>
        <q-separator class="line"/>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="processOrder" class="no-padding" style="min-height: 450px">
            <process-order ref="processOrder" :data="{'id': id, workshopId: data.workShopId}"/>
          </q-tab-panel>
          <q-tab-panel name="qualityOrder" class="no-padding">
            <quality-order ref="qualityOrder" :data="{'id': id, workshopId: data.workShopId}"/>
          </q-tab-panel>
          <q-tab-panel name="repairOrder" class="no-padding">
            <repair-order ref="repairOrder" :data="{'id': id}"/>
          </q-tab-panel>
          <q-tab-panel name="maintainPlan" class="no-padding">
            <maintain-plan ref="maintainPlan" :data="{'id': id}"/>
          </q-tab-panel>
          <q-tab-panel name="maintainOrder" class="no-padding">
            <maintain-order ref="maintainOrder" :data="{'id': id}"/>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>
    <!--查看pdf-->
    <look-pdf ref="showPdf"/>

    <!--查看图片-->
    <look-img ref="showImg"/>
  </div>
</template>

<script>
import processOrder from './components/equipment-record/process-order'
import qualityOrder from './components/equipment-record/quality-order'
import repairOrder from './components/equipment-record/repair-order'
import maintainPlan from './components/equipment-record/maintain-plan'
import maintainOrder from './components/equipment-record/maintain-order'
import lookImg from 'src/components/look-img/index'
import lookPdf from 'src/components/look-pdf/index'
import { getDevices } from 'src/boot/tpm/equipment-record'

export default {
  name: 'equipment-record-detail',
  components: {
    processOrder,
    qualityOrder,
    repairOrder,
    maintainPlan,
    maintainOrder,
    lookImg,
    lookPdf
  },
  data () {
    return {
      tab: 'processOrder',
      data: {},
      id: null,
      headList: {
        assetNumber: '设备编号',
        model: '设备型号',
        workShopName: '所在位置',
        name: '设备名称',
        deviceSpec: '设备规格',
        workCenterName: '所在工位',
        deviceTypeName: '设备类型',
        ncType: '数控系统',
        producer: '设备厂家',
        statusCode: '启用状态',
        toolMagazineCapacity: '刀库位数',
        cutterGrooveNum: '刀位槽数',
        introduceDate: '进厂日期',
        thirdId: '关联ID'
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    to.name === 'equipmentRecordDetail' && next(vm => {
      vm.initParams(to.query.id)
    })
  },
  methods: {
    // 初始化路由参数
    initParams (id) {
      // const params = this.$route.query.id
      if (id !== undefined && id !== this.id) {
        this.tab = 'processOrder'
        this.$q.loading.show()
        this.$nextTick(() => {
          this.$refs.processOrder.getList()
        })
        this.id = id
        this.data.documents = []
        this.getDevices()
      }
    },
    getDevices () {
      getDevices(this.id).then(res => {
        res.data.photoUrls = (typeof res.data.photoUrls) === 'object' ? res.data.photoUrls[0] : res.data.photoUrls
        res.data.statusCode = res.data.statusCode ? '启用' : '禁用'
        this.data = res.data
        console.log(this.data)
      }).finally(() => {
        this.$q.loading.hide()
      })
    },
    // 判断文件后缀
    judgeFileExtension (name) {
      let index = name.lastIndexOf('.')
      let ext = name.substr(index + 1)
      if (ext.toLowerCase() === 'pdf') {
        return {
          icon: 'icontubiao-54',
          color: 'red',
          type: 'pdf'
        }
      } else {
        return {
          icon: 'icontubiao-56',
          color: '#5f77fd',
          type: 'img'
        }
      }
    },
    // 预览文件
    showFile (type, item) {
      if (type === 'pdf') {
        this.$refs.showPdf.showDialog(item.url)
      } else {
        this.$refs.showImg.showDialog(item.url)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .row{
    margin-left -10px
    margin-right -10px
    .col-4{
      padding  0 20px
    }
  }
  .img-box{
    margin 0 20px
    width 180px
    height 180px
    border-radius 6px
    background-color #cfd6fe
    box-shadow 0px 0px 7px 0px rgba(22, 22, 22, 0.2)
    padding 12px
    >div{
      border 1px solid #ffffff
      background-position center
      background-repeat no-repeat
      background-size cover
      height 100%
      background-color #fff
    }
  }
  .sudoku_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:128px;
    padding-top 3px
    margin-right 20px
    margin-bottom 17px
  }
  .file_item{
    width 100%
    height 32px
    border-radius 6px
    cursor pointer
    background: #f7b82d
    color: #fff
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.15)
    line-height 32px
    padding 0 10px
  }

</style>
